<script setup>
import { ref } from 'vue';

// 表单数据
const formData = ref({
	mobile: '13212345678',
	habbit: '',
	password: 'abc12345',
	alt: '关于我的描述',
	code: '6666'
});

// 表单验证规则
const formRules = {
	// key需要和数据的属性名 以及 设置的name属性相同
	mobile: {
		// 校验规则，数组的形式来设置，可以设置多个规则
		rules: [
			// required 必填
			// errorMessage 错误信息
			// pattern 正则表达式
			// 绝大多数万战中对于手机号的效验，非常的不严格（松散） why？
			// 尽可能快的 拥有你这个用户，手机号大部分都只做非空效验
			{ required: true, errorMessage: '请填写手机号码' },
			{ pattern: '^[1][3-8][0-9]{9}$', errorMessage: '手机号码格式不正确' }
		]
	},
	password: {
		rules: [
			{ required: true, errorMessage: '请输入密码' },
			{ pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' }
		]
	},
	code: {
		rules: [
			{ required: true, errorMessage: '请输入正确的验证码' },
			{ pattern: '^//d4$', errorMessage: '验证码格式不正确' }
		]
	}
};
// 定义表单
const form = ref();
const submitData = async () => {
	// console.log(formData.value);
	// console.log(form.value);
	// 根据设置的校验规则 去校验对应的属性值
	try {
		const res = await form.value.validate();
		console.log(res);
	} catch (e) {
		console.log(e);
	}
};
</script>

<template>
	<!-- 表单容器 -->
	<uni-forms ref="form" label-width="0" :rules="formRules" :model="formData">
		<!-- 表单项 -->
		<uni-forms-item name="mobile">
			<!-- 输入区域 -->
			<uni-easyinput type="text" :clearable="false" v-model="formData.mobile" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item name="password">
			<uni-easyinput type="password" :clearable="false" v-model="formData.password" placeholder="请输入密码" />
		</uni-forms-item>
		<uni-forms-item>
			<!-- 输入区域 -->
			<uni-easyinput type="text" :clearable="false" v-model="formData.habbit" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item name="code">
			<!-- 输入区域 -->
			<uni-easyinput type="text" :clearable="false" v-model="formData.code" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item>
			<uni-easyinput type="textarea" v-model="formData.alt" :clearable="false" />
		</uni-forms-item>
	</uni-forms>
	<button class="uni-button" @click="submitData" type="primary">提交</button>
</template>
